import { Button, Dropdown } from 'antd'
import { changeAntdLocale, changeDefinedLocale } from '@/store/modules/front'
import { useAppDispatch, useAppSelector } from '@/store/hooks'

import type { MenuProps } from 'antd'
import SvgIcon from '@/components/SvgIcon'
import { TranslationOutlined } from '@ant-design/icons'
import enUS from 'antd/locale/en_US'
import zhCN from 'antd/locale/zh_CN'

export default function Translate() {
  // 获取redux数据

  const { definedLocale } = useAppSelector(
    (state: { front: any }) => state.front
  )

  const dispatch = useAppDispatch()
  // 事件的触发
  // 中英文语言切换
  const selectLocale = () => {
    if (definedLocale == 'zh') {
      dispatch(changeDefinedLocale('en'))
      dispatch(changeAntdLocale(enUS))
    } else {
      dispatch(changeDefinedLocale('zh'))
      dispatch(changeAntdLocale(zhCN))
    }
  }

  // 下拉框的展示
  const items: MenuProps['items'] = [
    {
      label: (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <SvgIcon name="zh_cn" width={30} height={20}></SvgIcon>
          <Button
            type="text"
            onClick={selectLocale}
            disabled={definedLocale == 'zh'}
          >
            简体中文
          </Button>
        </div>
      ),
      key: '0'
    },
    {
      label: (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <SvgIcon name="英国国旗" width={30} height={20}></SvgIcon>
          <Button
            type="text"
            onClick={selectLocale}
            disabled={definedLocale == 'en'}
          >
            English
          </Button>
        </div>
      ),
      key: '1'
    }
  ]

  return (
    <Dropdown menu={{ items }} placement="bottom">
      <TranslationOutlined
        id="languagebtn"
        onClick={selectLocale}
        style={{
          fontSize: '16px',
          height: 64,
          position: 'absolute',
          right: 110
        }}
      />
    </Dropdown>
  )
}
